<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本格式化属性</title>
        <style>
            /*1.控制字体: font-family指定字体家族属性 */
            *{
                 /*免费:微软雅黑、楷体、 sans-serif‘无衬线字体’等同于黑体、宋体..*/ 
                 font-family:微软雅黑,sans-serif;
            /*用户电脑存在字体，按照顺序选择执行，二选一，就近原则*/
            /*font-size字体尺寸属性：px：绝对值--PC  em：相对于父元素字体倍数调整--移动*/
            font-size:1.5em;
            /*font-weight字体加粗属性  属性值：数值【整数】 100-900
                                             英文  normal=400,bold=900*/
            font-weight: 900;
            /*font-style字体样式属性*/ 
            font-style: italic;
            /*text-transform字体转换属性:属性值uppercase 转大写
                                             lowercase 转小写
                                             capitalize 首字符转大写
            */
            text-transform: uppercase; 
            text-transform: lowercase;
            text-transform: capitalize; I
            /*text-indent文本块首行缩进属性:    属性值    数值px*/
            text-indent: 200px;
            }            
            /*2.控制文本布局*/
            h1+p{
                border: 1px solid red;
                /*text-align文本对齐属性：属性值：left/right/center
                                                justify 两端对齐【文本占满空间】
                                                左右布局*/
                text-align: center;
                text-align: justify;
                /*line-height行高属性：属性值：数值px  针对文本行高*/
                height: 40px;
                line-height: 40px;
                /*文本垂直居中：高度与行高一致*/
                letter-spacing: 20px;
                /*word-spacing单词间距属性：属性值【正负】数值px*/
                word-spacing: 10px;
            }                     
        </style>
    </head>
    <body>
        <!--文本格式化属性：针对文本和字体，四种效果：
        ①控制字体：font-family，font-size，font-weight等
        ②控制文本布局：text-align，line-height，letter-spacing等
        ③文本装饰效果：text-decoration，text-shadow等
        ④文本溢出和换行：overflow，white-space
        -->
        <h1>文本格式化属性：控制字体</h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, ut. Sed repellendus at expedita asperiores dolores magni ut et vel impedit! Rem quaerat quis cum exercitationem molestiae pariatur odio nobis!
        <h1>控制文本布局：文本</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus magni tempora perferendis. Modi aliquid minus ipsum voluptatibus corporis id, sed explicabo enim tenetur, veniam doloribus. Fugit aperiam repudiandae nihil aliquam!</p>
    </body>
</html>